<template>
  <CPageLayout
    class="emission-distri-wrapper"
    :headerConfig="headerConfig"
    :bodyWrapperStyle="`height: calc(100vh - 50px - 56px); padding: ${hasModel ? 0 : '16px'}`"
    bodyStyle="background: transparent"
    v-loading="loading"
  >
    <template v-if="hasModel">
      <div class="distri-head">
        <div class="head-flex">
          <div class="left"> <img :src="modelDetail?.fileUrl || productUrl" /> </div>
          <div class="right">
            <div class="g-flex-between-start">
              <div class="title">{{ empty(modelDetail?.modelName) }} </div>
              <el-button text type="primary" @click="changeModel">更换模型</el-button>
            </div>
            <div class="des">
              编码：{{ empty(modelDetail?.modelCode) }}
              <el-divider direction="vertical" /> 规格型号：{{ empty(modelDetail?.specification) }}
              <el-divider direction="vertical" /> 产品产地：{{
                empty(modelDetail?.manufactureCountry)
              }}
              <el-divider direction="vertical" /> 核算标准：{{
                modelDetail?.standard ? StandardMap[modelDetail.standard] : '-'
              }}
              <el-divider direction="vertical" /> 核算时间：{{ empty(modelDetail?.calcTime) }}
            </div>
            <div class="box-message">
              <div class="box">
                <div class="usually-tit"> 核算年份 </div>
                <div class="usually-val"> {{ empty(modelDetail?.accountYear) }} 年 </div>
              </div>
              <div class="box">
                <div class="usually-tit"> 产品碳足迹总量 </div>
                <div class="usually-val">
                  {{
                    empty(modelDetail?.calcResult) !== '-'
                      ? renderResultUnit(modelDetail?.calcResult as number)
                      : '-'
                  }}
                </div>
              </div>
              <div class="box">
                <div class="usually-tit"> 单位产品碳足迹 </div>
                <div class="usually-val">
                  {{
                    empty(modelDetail?.unitResult) !== '-'
                      ? `${renderResultUnit(modelDetail?.unitResult as number)}/${
                          modelDetail?.referenceFlowUnit
                        }`
                      : '-'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="distri-content-wrap">
        <div class="distri-content">
          <BoxTitle
            title="生命周期阶段分析"
            :desc="`功能单位：${empty(modelDetail?.functionUnit)}`"
          ></BoxTitle>
          <LifecycleEmissionDistributionChart
            ref="lifecycleEmissionRef"
            :emission-data="lifecycleEmissionData"
          />
          <LifecycleFlowChart
            ref="lifecycleFlowEmissionRef"
            :emission-data="lifecycleFlowEmissionData"
            :model-detail="modelDetail"
          />
        </div>
      </div>

      <div
        class="bottom-echart"
        v-if="
          partsEmissionData.itemEmissionInfo &&
          partsEmissionData.itemEmissionInfo.length &&
          partsEmissionData.itemEmissionProportionInfo &&
          partsEmissionData.itemEmissionProportionInfo.length
        "
      >
        <BoxTitle title="零部件碳排放分布" desc="仅展示碳排占比前 80% 的零部件"></BoxTitle>
        <PartEmissionDistributionChart ref="partsEmissionRef" :emission-data="partsEmissionData" />
      </div>

      <ModelSelectDialog
        v-model:visible="modelSelectDialogVisible"
        @select="handleSelectedModel"
        title="选择模型"
      >
      </ModelSelectDialog>
    </template>
    <div class="comparison-empty g-flex-center-center--column" v-else>
      <img class="comparison-empty-img" src="@/assets/images/empty-img.png" />
      <span class="comparison-empty-text g-mt9">暂无已核算模型</span>
    </div>
  </CPageLayout>
</template>
<script lang="ts">
export default {
  name: 'EmissionDistribution'
};
</script>
<script lang="ts" setup name="EmissionDistribution">
import { ref } from 'vue';
import BoxTitle from './components/BoxTitle/index.vue';
import LifecycleEmissionDistributionChart from './components/LifecycleEmissionDistributionChart/index.vue';
import LifecycleFlowChart from './components/LifecycleFlowChart/index.vue';
import PartEmissionDistributionChart from './components/PartEmissionDistributionChart/index.vue';
import ModelSelectDialog from '@/businessComponents/ModelSelectDialog/index.vue';
import { CPageLayout, CPageHeaderComplexProps } from '@/components/CPageLayout';

import type {
  GetListVisibleModelResult,
  GetVisibleModelDetailResult,
  GetModelLifecycleEmissionResult,
  GetModelPartsEmissionResult,
  GetModelFLowEmissionResult
} from '@/apis/pcf/pcfForm/model/pcfFormModel';
import {
  getLastVisibleModel,
  getVisibleModelDetail,
  getModelLifecycleEmission,
  getModelFLowEmission,
  getModelPartsEmission
} from '@/apis/pcf/pcfForm/pcfForm';
import { nextTick, onMounted } from 'vue';
import { empty, renderResultUnit } from '@/utils';
import { StandardMap } from '@/constants/pcf';
import { useRoute } from 'vue-router';
import productUrl from '@/assets/images/icon_product.png';
const modelDetail = ref<GetVisibleModelDetailResult>();
const route = useRoute();
const modelSelectDialogVisible = ref(false);
function changeModel() {
  modelSelectDialogVisible.value = true;
}
function handleSelectedModel(model: GetListVisibleModelResult) {
  console.log('handleSelectedModel', model);
  modelSelectDialogVisible.value = false;
  getData(model.modelNo);
}
/**
 * header配置
 */
const headerConfig: CPageHeaderComplexProps = {
  title: '碳排放分布分析',
  // descPlacement: 'inline',
  size: 'small',
  shadow: false
};
const loading = ref(false);
/**
 * 生命周期阶段分析
 */
const lifecycleEmissionRef = ref();
const lifecycleEmissionData = ref<GetModelLifecycleEmissionResult[]>([]);
const lifecycleFlowEmissionRef = ref();
const lifecycleFlowEmissionData = ref<GetModelFLowEmissionResult>({
  inputFlow: [],
  outputFlow: []
});

const partsEmissionRef = ref();
const partsEmissionData = ref<GetModelPartsEmissionResult>({} as GetModelPartsEmissionResult);
const hasModel = ref(false);
async function getData(propModelNo?: string) {
  try {
    loading.value = true;
    let modelNo = '';
    if (propModelNo) {
      modelNo = propModelNo;
    } else {
      modelNo = await getLastVisibleModel();
    }
    hasModel.value = !!modelNo;
    console.log('modelNo', modelNo);
    if (modelNo) {
      getVisibleModelDetail(modelNo).then(info => {
        modelDetail.value = info;
        console.log('modelDetail', modelDetail.value);
      });
      getModelLifecycleEmission(modelNo).then(res => {
        lifecycleEmissionData.value = res;
        nextTick(() => {
          lifecycleEmissionRef.value?.renderChart();
        });
      });
      getModelPartsEmission(modelNo).then(res1 => {
        partsEmissionData.value = res1;
        nextTick(() => {
          partsEmissionRef.value?.renderChart();
        });
      });
      getModelFLowEmission(modelNo).then(res2 => {
        lifecycleFlowEmissionData.value = res2;
      });
      loading.value = false;
    } else {
      loading.value = false;
    }
  } catch (error) {
    console.log('error', error);
    loading.value = false;
  }
}

onMounted(() => {
  const { modelNo } = route.query;
  getData(modelNo as string);
});
</script>

<style lang="scss" scoped>
.emission-distri-wrapper {
  .distri-head {
    padding: 20px;
    height: 172px;
    background: #fff;

    .head-flex {
      display: flex;

      .left {
        width: 176px;
        height: 132px;
        border-radius: 6px;
        border: 1px solid #ebeff2;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        flex: 1;
        margin-left: 16px;

        .title {
          height: 26px;
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #0a1f33;
          line-height: 26px;
        }

        .des {
          margin-top: 2px;
          height: 22px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #435970;
          line-height: 22px;
        }

        .box-message {
          display: flex;
          justify-content: space-between;
          height: 64px;
          margin-top: 16px;

          .box {
            flex: 1;
            flex-basis: 331px;
            padding: 9px 17px;
            background: #f8fbfc;
            border-radius: 3px;
            border: 1px solid #ebeff2;

            .usually-val {
              font-size: 16px;
              font-family: D-DINExp-Bold, D-DINExp;
              font-weight: bold;
              color: #0a1f33;
              line-height: 24px;
            }

            .usually-tit {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #435970;
              line-height: 22px;
            }
          }

          .box:nth-child(n + 2) {
            margin-left: 8px;
          }
        }
      }
    }
  }

  .distri-content-wrap {
    padding: 16px;
    width: 100%;
  }

  .distri-content {
    min-height: 596px;
    background: #fff;
    width: 100%;
  }

  .bottom-echart {
    padding-bottom: 10px;
    margin: 0 16px 16px;
    height: 398px;
    background: #fff;
  }
}

.comparison-empty {
  width: 100%;
  height: calc(100vh - 106px - 32px);
  background-color: #fff;
  border-radius: 6px;

  .comparison-empty-img {
    width: 180px;
    height: 110px;
  }

  .comparison-empty-text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7a8a99;
    line-height: 22px;
  }
}
</style>
